<template>
  <el-form :model="detailForm" ref="detailForm" :inline="false">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">基础信息</span>
      </div>

      <el-row>
        <el-col>
          <el-table :data="detailForm.tableData" border tooltip-effect="dark" style="width: 100%">
            <el-table-column align="center" label="品牌/车型" prop="carNo"  min-width="280">
              <template #default="{row}">
                {{ row.brandName }}{{ row.modelName ? '/' + row.modelName : '' }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="车架号" prop="vinNo" min-width="100" />

            <el-table-column align="center" label="商业险实际开始时间" prop="syxActualBeginTime" min-width="180">
              <template #default="{row}">
                <span>{{ row.syxActualBeginTime }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="商业险实际结束时间" min-width="180" prop="syxActualEndTime">
              <template #default="{row}">
                <span>{{ row.syxActualEndTime }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="商业险保单号" prop="syxPolicyCode" min-width="160">
              <template #default="{row}">
                <span>{{ row.syxPolicyCode }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="交强险实际开始时间" prop="jqxActualBeginTime" min-width="180">
              <template #default="{row}">
                <span>{{ row.jqxActualBeginTime }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="交强险实际结束时间" prop="jqxActualEndTime" min-width="180">
              <template #default="{row}">
                <span>{{ row.jqxActualEndTime }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="交强险保单号" prop="jqxPolicyCode" min-width="160">
              <template #default="{row}">
                <span>{{ row.jqxPolicyCode }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="商业险保单" width="120">
              <template #default="{row}">
                <el-popover placement="right"
                            v-if="row.syxPolicyUrl"
                            trigger="click">
                  <image-common v-model="row.syxPolicyUrl" :disabled="true" :up-type="2"/>
                  <el-button type="text" slot="reference">查看</el-button>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column align="center" label="交强险保单" width="120">
              <template #default="{row}">
                <el-popover placement="right"
                            v-if="row.jqxPolicyUrl"
                            trigger="click">
                  <image-common v-model="row.jqxPolicyUrl" :disabled="true" :up-type="2"/>
                  <el-button type="text" slot="reference">查看</el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>

  </el-form>
</template>

<script>
export default {
  name: "renewalInformation", //续保信息审核
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },

  computed: {
    detailForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
  },
  watch: {
  },
  data() {
    return {
      obj: {},
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.el-form {

  ::v-deep.formTable {
    margin-bottom: 0;
  }

  ::v-deep.el-form-item__content {
    line-height: normal;
    flex: 1;
    margin-left: 0 !important;
  }

  ::v-deep.el-form-item__label {
    line-height: normal;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #464646;
  }
}

.box-card {
  font-size: 14px;
  margin-bottom: 16px;

  ::v-deep .el-card__header {
    padding: 0;
    height: 48px;
    margin: 0 14px;
    display: flex;
    align-items: center;

    .header-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;

      .header-card-title {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
      }
    }
  }

  ::v-deep .el-card__body {
    padding: 10px 14px;
  }

  .box-card-inp {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .inp-name {
      width: 130px;
      text-align: right;
      font-size: 14px;
    }

    .inp-name-r {
      flex: 1;
    }
  }

  .top-card {
    display: flex;

    .top-card-right {
      flex: 1;
      font-size: 14px;
      line-height: 36px;
      margin-left: 20px;
    }
  }
}
</style>



